<template>
    <!-- 零存整取 -->
    <div class="financial-0-deposit-taking">
        <div class="madp-info-card">
            <div class="madp-info-card-content">
                <div v-for="(item, index) in lists" :key="index" class="item">
                    <p>{{ item.descr }}</p>
                    <span>{{ item.rate }}%</span>
                </div>
            </div>
        </div>
        <!-- <div class="madp-btn">立即存入</div> -->
        <div class="madp-footer-notice">
            <p>温馨提示</p>
            <span>根据中国人民银行规定，零存整取定期储蓄在开户时储户应与金融机构约定每月固定存入的金额，分月存入</span>
        </div>
        <share-btn :shareInfo="shareInfo" />
        <back-btn />
        <buy-btn btnText="立即存入" prodType="6" />
    </div>
</template>
<script>
    import financialApi from '@/api/financial-shop.js';
    import buyBtn from '@/components/buy-btn';
    import shareBtn from '@/components/share-btn';
    import backBtn from '@/components/back-btn.vue';
    import mxInitWxConfig from '@/mixin/mxInitWxConfig.js';

    export default {
        name: 'financial-zero-deposit-taking',
        components: { buyBtn, shareBtn, backBtn },
        mixins: [mxInitWxConfig],
        data() {
            return {
                shareInfo: {},
                lists: []
            };
        },
        watch: {
            wxUserId() {
                if (this.wxUserId) {
                    let params = this.$route.query;
                    this.type = params.type;
                    this.getDepositList();
                }
            }
        },
        created() {},
        activated() {
            let params = this.$route.query;
            document.title = params.titleName || '零存整取';
            // this.type = params.type
            // this.getDepositList()
            this.shareInfo = {
                title: params.titleName || '零存整取', // 分享标题
                desc: '每月自动存入，积零成整', // 分享描述
                link: this.$utils.getShareUrl(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: `${this.$utils.apiUrl}/mfs/avatar.jpg`
            };
            this.$wxShare.setShareInfo(this.shareInfo);
        },
        deactivated() {
            this.wxUserId = '';
        },
        methods: {
            getDepositList() {
                financialApi
                    .getDepositList({
                        type: this.type
                    })
                    .then((res) => {
                        this.lists = res.data.data;
                        let params = this.$route.query;
                        this.$sensorsSend('DepositView', {
                            from_page_name: sessionStorage.getItem('from_page_name') || '',
                            recommend_id: this.$route.query.wxUserId || this.$store.state.vuex_wxUserId || this.wxUserId,
                            deposit_type: params.titleName,
                            deposit_number: params.type,
                            deposit_name: params.titleName
                        });
                    });
            }
        }
    };
</script>
<style scoped lang="scss">
    .financial-0-deposit-taking {
        width: 100%;
        min-height: 100vh;
        // overflow-y: scroll;
        padding-top: 130px;
        background-image: url('../../assets/img/financialShop/lczq-bg.png');
        background-size: 100%;
        background-position: 0 -50px;
        background-repeat: no-repeat;
        background-color: #efefef;
        padding-bottom: 4rem;
        box-sizing: border-box;
        .madp-info-card {
            margin: 12px 15px;
            background: #fff;
            box-shadow: 0 5px 10px rgba(211, 198, 182, 0.3);
            border-radius: 8px;
            padding: 0px 12px;
            &-content {
                margin: 15px 0;
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
                padding: 15px 0;
                .item {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    width: 33.3%;
                    text-align: center;
                    color: #2c2c2c;
                    font-size: 16px;
                    p {
                        font-weight: 500;
                        line-height: 30px;
                    }
                    span {
                        font-weight: bold;
                        font-size: 20px;
                        color: #ed5555;
                        line-height: 34px;
                    }
                }
            }
        }
        .madp-btn {
            width: 321px;
            height: 40px;
            background: #ed5555;
            border-radius: 20px;
            text-align: center;
            line-height: 40px;
            margin: 0 auto;
            font-size: 16px;
            color: #fff;
            margin-top: 3rem;
        }
        .madp-footer-notice {
            margin-top: 30px;
            color: #878787;
            padding: 0 12px;
            p {
                font-size: 14px;
                font-weight: bold;
                line-height: 30px;
            }
            span {
                font-weight: 400;
                font-size: 12px;
                padding-top: 6px;
                display: block;
            }
        }
    }
</style>
